<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>New Account</title>

  <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
  <script type="text/javascript">
    $(function () {
      //为username绑定失去焦点事件
      $("#username").on('blur',function () {
        //用户名不为空，发送AJAX请求
        if(this.value != ""){
          $.get("/account/ajaxUsernameIsExist","username=" + this.value,function (data){
            console.log(data);
            if(data == "")
              $("#msg").text("Username is available");
            else
              $("#msg").text("Username is taken");
          });
        }
        else
          $("#msg").text("Username can not be null");
      });

      var password = "";
      var repeatedPassword = "";
      //为password绑定失去焦点事件
      $("#password").on('blur',function () {
        //获取输入的第一个密码
        password = this.value;
        if(password == "")
          $("#pwd1Error").text("Password can not be null");
        else
          $("#pwd1Error").text("");
        if(password != repeatedPassword)
          $("#pwd2Error").text("Two password entries are inconsistent");
        else
          $("#pwd2Error").text("");
      })

      //为repeatedPassword绑定失去焦点事件
      $("#repeatedPassword").on('blur',function () {
        //获取输入的第二个密码
        repeatedPassword = this.value;
        if(password != repeatedPassword)
          $("#pwd2Error").text("Two password entries are inconsistent");
        else
          $("#pwd2Error").text("");
      });

      //为验证码图片绑定单击事件
      $("#code_image").on('click',function () {
        this.src = "/account/kaptcha?" + new Date();
      });
    });
  </script>
</head>
<body>
  <div th:replace="common/Top"></div>

  <div id="Content">
    <div id="Catalog">
      <form action="/account/checkRegister" method="post">
        <h3>User Information</h3>

        <table style="margin-left: 300px">
          <tr>
            <th>User ID:</th>
            <td><input type="text" name="username" id="username"/></td>
            <td id="msg" style="color:red;width: 300px;background-color: white;font-size: 16px"></td>
          </tr>
          <tr>
            <th>New password:</th>
            <td>
              <input id="password" type="password" name="password"/>
            </td>
            <td id="pwd1Error" style="color:red;width: 300px;background-color: white;font-size: 16px"></td>
          </tr>
          <tr>
            <th>Repeat password:</th>
            <td>
              <input id="repeatedPassword" type="password" name="repeatedPassword"/>
            </td>
            <td id="pwd2Error" style="color:red;width: 300px;background-color: white;font-size: 16px"></td>
          </tr>
          <tr>
            <th>Verification code:</th>
            <td>
              <input type="text" name="code" style="width: 60px">
              <img id="code_image" style="width: 88px;height: 22px;position: absolute;+margin-top:1px;margin-left: 5px" src="/account/kaptcha">
            </td>
          </tr>

          <tr th:if="false">
            <td colspan="3"  style="color: red">${sessionScope.codeError}</td>
          </tr>

          <tr th:if="false">
            <td colspan="3"  style="color: red">${sessionScope.passwordFailed}</td>
          </tr>

          <tr th:if="false">
            <td colspan="3"  style="color: red">${sessionScope.usernameFailed}</td>
          </tr>
        </table>

        <input type="submit" name="newAccount" value="Register" />
      </form>
    </div>
  </div>

  <div th:replace="common/Bottom"></div>
</body>
</html>